<template>
  <nav class="navbar navbar-expand-md pt-4 pb-4 border-0" style="z-index: 1000">
    <div class="container">
      <span style="font-size: 30px;color: red;margin-right: 20px">APS </span> 高级排产排程系统
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
              aria-label="Toggle navigation">
        <i class="fa-solid fa-bars-staggered"></i>
      </button>
      <div class="collapse navbar-collapse nav-container " id="navbarSupportedContent">
        <div class="mx-auto">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0  hidden">
            <li class="nav-item">
              <a aria-current='page' class='nav-link link' @click="toPath('/')">首页</a>
            </li>
            <!--            <li class="nav-item">-->
            <!--              <a class='nav-link link' @click="toBlob('csdn')"></a>-->
            <!--            </li>-->
            <li class="nav-item dropdown position-static hidden">
              <a class="nav-link dropdown-toggle link" href="#" id="portfolioDropdown" role="button"
                 data-bs-toggle="dropdown" aria-expanded="false">
                博客 <i class="fa-solid fa-angle-down text-sm"></i>
              </a>
              <ul class="dropdown-menu w-100 menu" aria-labelledby="portfolioDropdown">
                <li>
                  <div class="container m-auto pt-4">
                    <div class="row">
                      <div class="col-lg-3 col-md-6">
                        <ul>
                          <li><a class='nav-link' @click="toBlob('csdn')">CSDN</a></li>
                        </ul>
                      </div>
                      <div class="col-lg-3 col-md-6">
                        <ul>
                          <li><a class='nav-link' @click="toBlob('osChina')">OS-CHINA</a></li>
                        </ul>
                      </div>
                    </div>
                    <hr>
                    <ul class="list-inline pt-3 pb-4 hidden">
                      <li class="list-inline-item">
                        <a href="#" class="text-black">
                          <i class="fa-brands fa-facebook-f"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#" class="text-black">
                          <i class="fa-brands fa-x-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#" class="text-black">
                          <i class="fa-brands fa-linkedin-in"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#" class="text-black">
                          <i class="fab fa-instagram"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <li class="nav-item dropdown position-static hidden">
              <a class="nav-link dropdown-toggle link" href="#" id="servicesDropdown" role="button"
                 data-bs-toggle="dropdown" aria-expanded="false">
                服务 <i class="fa-solid fa-angle-down text-sm"></i>
              </a>
              <ul class="dropdown-menu w-100 menu" aria-labelledby="servicesDropdown">
                <li>
                  <div class="container m-auto pt-4">
                    <div class="row">
                      <div class="col-lg-3 col-md-6 mb-4">
                        <div class="p-2" style="display: flex;">
                          <button class="btn btn-dark btn-lg rounded pt-3 pb-3">
                            <i class="fa-solid fa-brain"></i>
                          </button>
                          <a class='nav-link mt-2' href='service.html'>Brainstorming</a>
                        </div>
                        <div class="p-2 mt-4" style="display: flex;">
                          <button class="btn btn-dark btn-lg rounded pt-3 pb-3">
                            <i class="fas fa-search"></i>
                          </button>
                          <a class='nav-link mt-2' href='service.html'>SEO Optimization</a>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-6 mb-4">
                        <div class="p-2" style="display: flex;">
                          <button class="btn btn-dark btn-lg rounded pt-3 pb-3">
                            <i class="fa-solid fa-pen-nib"></i>
                          </button>
                          <a class='nav-link mt-2' href='service.html'>Product Design</a>
                        </div>
                        <div class="p-2 mt-4" style="display: flex;">
                          <button class="btn btn-dark btn-lg rounded pt-3 pb-3">
                            <i class="fa-solid fa-cloud"></i>
                          </button>
                          <a class='nav-link mt-2' href='service.html'>Cloud Solutions</a>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-6">
                        <ul>
                          <li><a class='nav-link' href='service.html'>Web Development</a>
                          </li>
                          <li><a class='nav-link' href='service.html'>App Development</a>
                          </li>
                          <li><a class='nav-link' href='service.html'>IT Consulting</a></li>
                          <li><a class='nav-link' href='service.html'>Cyber Security</a>
                          </li>
                          <li><a class='nav-link' href='service.html'>Network Solutions</a>
                          </li>
                          <li><a class='nav-link' href='service.html'>Software Testing</a>
                          </li>
                        </ul>
                      </div>
                      <div class="col-lg-3 col-md-6">
                        <ul>
                          <li><a class='nav-link' href='service.html'>Digital Marketing</a>
                          </li>
                          <li><a class='nav-link' href='service.html'>E-commerce
                            Solutions</a></li>
                          <li><a class='nav-link' href='service.html'>DevOps Solutions</a>
                          </li>
                          <li><a class='nav-link' href='service.html'>Data Analytics</a>
                          </li>
                          <li><a class='nav-link' href='service.html'>Business
                            Intelligence</a></li>
                          <li><a class='nav-link' href='service.html'>UI/UX Design</a></li>
                        </ul>
                      </div>
                    </div>
                    <hr>

                  </div>
                </li>
              </ul>
            </li>
            <li class="nav-item hidden">
              <a class='nav-link link Our ' href='contact.html'>Contact</a>
            </li>
          </ul>
        </div>
      </div>
      <a class="btn btn-dark get-started getstarted-btn   animate__flash animate__delay-2s" href="#" @click="toAps">体验地址</a>
    </div>
  </nav>

  <!-- END header -->
</template>

<script>
import {toAps, toBlob, toPath} from "@/js";

export default {
  methods: {
    toAps,
    toPath,
    toBlob
  }
}
</script>


<style scoped>
#navbarSupportedContent {
  display: none;
}

a {
  cursor: pointer;
  color: #000;
  background-color: #fff;
}
</style>